[Javascript] - 비동기 정복하기

const posts = [
  {
    title: "첫 번째 포스트",
    body: "첫 번째 글 내용입니다.",
  },
  {
    title: "두 번째 포스트",
    body: "두 번째 글 내용입니다.",
  },
]

// 블로그 글을 모두 출력하는 데에는 1초가 걸립니다.
function getPosts() {
  // setTimeout 함수는 지정한 시간이 지나면 첫 번째 인자로 받은 함수를 실행합니다.
  setTimeout(() => {
    let output = ""
    posts.forEach((post, idx) => {
      output += `<li>${post.title}</li>`
    })
    document.body.innerHTML = output
  }, 1000)
}

// 블로그에 새로운 글을 추가하는 데에는 2초가 걸립니다.
function createPost(post) {
  setTimeout(() => {
    posts.push(post)
  }, 2000)
}

createPost({ title: "세 번째 포스트", body: "세 번째 글 내용입니다." })
getPosts()

const posts = [
  {
    title: "첫 번째 포스트",
    body: "첫 번째 글 내용입니다.",
  },
  {
    title: "두 번째 포스트",
    body: "두 번째 글 내용입니다.",
  },
]

function getPosts() {
  setTimeout(() => {
    let output = ""
    posts.forEach((post, idx) => {
      output += `<li>${post.title}</li>`
    })
    document.body.innerHTML = output
  }, 1000)
}

// 새로운 글을 추가하면 callback 인자로 주어진 getPosts() 함수를 호출합니다.
function createPost(post, callback) {
  setTimeout(() => {
    posts.push(post)
    callback()
  }, 2000)
}

// 초기 글 목록을 불러오기 위한 getPosts 호출
getPosts()

createPost(
  { title: "세 번째 포스트", body: "세 번째 글 내용입니다." },
  getPosts
)

new Promise((resolve, reject) => {
  // 함수 본문에서 비동기 작업을 수행합니다.
  try {
    // 작업 성공 시 첫 번째 인자 함수를 호출합니다.
    resolve()
  } catch (err) {
    // 작업 실패 시 두 번째 인자 함수를 호출합니다.
    reject()
  }
})
  // then 메서드에는 첫 번째 인자 함수의 인자가 전달됩니다.
  .then()
  // catch 메서드에는 두 번째 인자 함수의 인자가 전달됩니다.
  .catch()

const posts = [
  {
    title: "첫 번째 포스트",
    body: "첫 번째 글 내용입니다.",
  },
  {
    title: "두 번째 포스트",
    body: "두 번째 글 내용입니다.",
  },
]

function getPosts() {
  setTimeout(() => {
    let output = ""
    posts.forEach((post, idx) => {
      output += `<li>${post.title}</li>`
    })
    document.body.innerHTML = output
  }, 1000)
}

function createPost(post) {
  return new Promise((resolve, reject) =>
    setTimeout(() => {
      try {
        posts.push(post)
        resolve()
      } catch (err) {
        reject("에러가 발생했습니다.")
      }
    }, 2000)
  )
}

getPosts()

createPost({
  title: "세 번째 포스트",
  body: "세 번째 글 내용입니다.",
})
  .then(() => getPosts())
  .catch(err => console.log(err))

// 콜백을 사용한 중첩 비동기 동작 제어
function callback1(callback2) {
    (비동기 작업 1 수행)
    callback2(callback3) {
        (비동기 작업 2 수행)
        callback3(callback4) {
            (비동기 작업 3 수행)
            callback4(callback5) {
                ...
            }
        }
    }
}

// 프라미스를 사용한 중첩 비동기 동작 제어
function promise1() {
  return new Promise((resolve, reject) => {
    (비동기 작업 1 수행)
    resolve()
  })
}

function promise2() {
  return new Promise((resolve, reject) => {
    (비동기 작업 2 수행)
    resolve()
  })
}

function promise3() {
  return new Promise((resolve, reject) => {
    (비동기 작업 3 수행)
    resolve()
  })
}

promise1()
    .then(() => promise2())
    .then(() => promise3())

// 수행할 비동기 동작들을 하나의 async 함수로 감쌉니다.
async function (함수명) () {
    await (수행할 비동기 동작 1);
    await (수행할 비동기 동작 2);
    await (수행할 비동기 동작 3);
    // await이 붙은 비동기 동작은 코드 순서 = 실행 순서가 보장됩니다.
}

const posts = [
  {
    title: "첫 번째 포스트",
    body: "첫 번째 글 내용입니다.",
  },
  {
    title: "두 번째 포스트",
    body: "두 번째 글 내용입니다.",
  },
]

function getPosts() {
  setTimeout(() => {
    let output = ""
    posts.forEach((post, idx) => {
      output += `<li>${post.title}</li>`
    })
    document.body.innerHTML = output
  }, 1000)
}

function createPost(post) {
  return new Promise((resolve, reject) =>
    setTimeout(() => {
      try {
        posts.push(post)
        resolve()
      } catch (err) {
        reject("에러가 발생했습니다.")
      }
    }, 2000)
  )
}

async function create() {
  await createPost({
    title: "세 번째 포스트",
    body: "세 번째 글 내용입니다.",
  })
  getPosts()
}

getPosts()
create()